import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
import React from 'react';

import userService from '@/api/services/security/userService';
import DebounceSelect from '@/components/debounce-select';

import { SearchFormProps } from '#/entity';
import { OnlineUserAccountType } from '#/enum';
import { onlineUserAccountMapText } from '#/publicVariable';

export default function OnLineUserSearchForm({ onOk, onReset }: SearchFormProps) {
  console.log('search init');
  const { token } = theme.useToken();
  const [form] = Form.useForm();

  const formStyle: React.CSSProperties = {
    maxWidth: 'none',
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 24,
  };

  const onFinish = (values: any) => {
    onOk(values);
  };
  const onFormReset = () => {
    form.resetFields();
    onReset();
  };
  const userInfo = async (qs: string) => {
    const res = await userService.getUserList({ take: 10, page: 1, name: qs });
    return res.data.map((item): any => ({
      label: item.name,
      value: item.id,
    }));
  };
  return (
    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item name="userId" label="登录用户">
            <DebounceSelect showSearch placeholder="请选择下单用户" fetchOptions={userInfo} />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name="account" label="账户类型">
            <Select
              options={Object.keys(OnlineUserAccountType).map((key) => ({
                value: OnlineUserAccountType[key],
                label: onlineUserAccountMapText[OnlineUserAccountType[key]],
              }))}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="登录应用" name="app" className="!mb-0">
            <Input />
          </Form.Item>
        </Col>
      </Row>
      <div style={{ textAlign: 'right' }}>
        <Space size="small">
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button onClick={onFormReset}>重置</Button>
        </Space>
      </div>
    </Form>
  );
}
